<script setup>
	import { ref, watch } from 'vue'
	import { message } from 'ant-design-vue'
	import dataConnectorApi from '@/views/plugin/dashboard/api/dataConnectorApi'

	const props = defineProps({
		selectedTables: {
			type: Array,
			required: true
		},
		dataConnectorId: {
			type: String,
			required: true
		}
	})

	const emit = defineEmits(['update:selectedTables'])

	// 数据表列表
	const tableList = ref([])

	// 加载数据表列表
	const loadTables = async () => {
		try {
			const res = await dataConnectorApi.tables({ id: props.dataConnectorId })
			tableList.value = res
		} catch (error) {
			message.error('获取数据表列表失败')
		}
	}

	// 监听数据连接器ID变化
	watch(
		() => props.dataConnectorId,
		(newId) => {
			if (newId) {
				loadTables()
			}
		},
		{ immediate: true }
	)

	defineExpose({
		loadTables
	})
</script>

<template>
	<a-select
		:value="selectedTables"
		mode="multiple"
		style="width: 50%"
		placeholder="请选择数据表"
		@update:value="(val) => emit('update:selectedTables', val)"
	>
		<a-select-option v-for="table in tableList" :key="table" :value="table">
			{{ table }}
		</a-select-option>
	</a-select>
</template>
